<template>
  <div>
    <!-- header部分开始 -->
    <HeaderBar />
    <!-- header部分结束 -->
    <div class="s_content">
      <div class="s_content_c inner_c">
        <div class="s_info">
          <div class="s_title">
            <a href="#"> 首页 </a>
            &gt;
            <span> 所有商品 </span>
          </div>
          <div class="screen">
            <table>
              <tr class="t1">
                <th>品牌</th>
                <td>
                  <a href="#">无印</a>
                  <a href="#">博朗</a>
                  <a href="#">花印</a>
                </td>
              </tr>
              <tr class="t2">
                <th>类别</th>
                <td>
                  <a href="#">不锈钢</a>
                  <a href="#">原料水泥</a>
                  <a href="#">塑料</a>
                  <a href="#">木质</a>
                </td>
              </tr>
            </table>
          </div>
          <div class="fun">
            <div class="sort">
              <span>排序：</span>
              <a href="#" class="s1"> <i />销量 </a>
              <a href="#" class="s2"> <i />价格 </a>
              <a href="#" class="s3"> <i />上架时间 </a>
            </div>
            <div class="swi">
              <span>仅显示有货：</span>
              <a href="#">
                <i />
              </a>
            </div>
            <div class="total">共<span>20</span>个商品</div>
          </div>
          <div class="s_prod">
            <ul class="pub_pro">
              <li>
                <img src="@/assets/images/img47.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img41.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img42.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img43.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img44.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img46.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img48.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img49.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img49.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img47.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img47.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
              <li>
                <img src="@/assets/images/img47.png" alt="">
                <div class="cont">
                  <h3>不锈钢汤勺</h3>
                  <span>￥300</span>
                </div>
                <div class="mask">
                  <a href="#" class="btn">查看详情</a>
                </div>
              </li>
            </ul>
          </div>
          <div class="pages">
            <a href="#">&lt;</a>
            <a href="#" class="tol cur">1</a>
            <a href="#" class="tol">2</a>
            <a href="#">&gt;</a>
          </div>
        </div>
      </div>
    </div>
    <!-- footer部分开始 -->
    <EndBar />
    <!-- 返回顶部 -->
    <SideBar />
  </div>
</template>

<script>
import HeaderBar from '../../components/bars/HeaderBar'
import EndBar from '../../components/bars/EndBar'
import SideBar from '../../components/bars/SideBar'
export default {

  components: {
    HeaderBar,
    EndBar,
    SideBar
  }
}
</script>

<style scoped>
@import "../../assets/css/origincss/reset.css";
@import "../../assets/css/origincss/common.css";
@import "../../assets/css/origincss/allproducts.css";
</style>
